<template>
<div>
  <header-nav></header-nav>
      <div class="topics">
        <ul>
          <li v-for="item in notesone" :key="item.id" >
            <div class="img">
              <img :src="item.image" alt="">
            </div>
            <p>{{item.name}}</p>
          </li>
          <li v-for="(item,index) in notestwo" :key="index">
            <div class="img">
              <img :src="item.image" alt="">
            </div>
            <p>{{item.name}}</p>
          </li>
          <!-- <li v-for="(item,index) in notestwo" :key="item.id" v-show="index == 4" style="border:1px solid #5D9CA4"> <p>{{item.name}}</p></li> -->
        </ul>
      </div>

      <div class="node">
        <div class="good" v-for="(item,index) in good" :key="index">
          
          <div class="good-img" v-if="item.type == 2">
            <div class="img">
              <img :src="item.activity.image" alt="">
            </div>
            <div class="pull">
              <p>{{item.activity.name}}</p>
            </div>
            <div class="duo">
              <div class="duo-left">
              <img :src="item.activity.author.p" alt="">
              <span>{{item.activity.author.n}}</span>
              </div>
              <div class="duo-right">
                <img :src="item.activity.action_icon" alt="">
                <span>{{item.activity.action_title}}</span>
              </div>
            </div>
          </div>


          <div class="good-img" v-if="item.type == 1">
          <router-link :to="'/noteils?id='+ item.note.id">
            <div class="img">
              <img :src="item.note.image_u" alt="">
            </div>
            <div class="pull">
              <p>{{item.note.title}}</p>
            </div>
            <div class="duo">
              <div class="duo-left">
              <img :src="item.note.author.p" alt="">
              <span>{{item.note.author.n}}</span>
              </div>
              <div class="duo-right">
              <span class="iconfont icon-aixin"></span>
              <span>{{item.note.like_count}}</span>
              </div>
            </div>
          </router-link>
          </div>


          <div v-else></div>
        </div>
      </div>
  
  
  
  

  
  </div>
</template>

<script>
import headerNav from "../components/base/headerNav.vue"
import {getHomeNotes} from "../api/node"
export default {
  data(){
    return {
      notesone:[],
      notestwo:[],
      good:[]
    }
  },
  created(){
    getHomeNotes().then(data=>{
      this.notesone = data.result.topics[0];
      this.notestwo = data.result.topics[1];
      this.good = data.result.list
      console.log(this.good);
    })
  },
    components:{
        headerNav,
       
    }
}
</script>

<style lang="less">
  .topics{
    margin-left: 10px;
    ul{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      li{
          display: flex;
         background-color: #F3F8FB;
          align-items: center;
          padding: 0px 10px;
          height: 35px;
          border-radius: 20px;
           margin-top:10px;
          margin-right: 10px;
          .img{
            width:10px;
            height: 10px;
            margin: 0 2px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          p{
            line-height: 35px;
            font-size: 12px;
            color: #207883;
          }
      }

    }
  }
  .topics ul li:nth-last-child(1){
    border:1px solid #5D9CA4
  }
  .topics ul li:nth-last-child(1) .img{
    width: 0;
    height: 0;
  }
  .topics ul li:nth-last-child(1) .img img{
    display: none;
  }
  .node{
    margin:10px 0px;
    // width: 100%;
    padding:0px 5px;
    column-count: 2;
    column-gap: 10px;
    .good{
      width: 100%;
      margin-bottom: 10px;
        display: block;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        counter-increment:item-counter;
      p{
        font-size: 14px;
        line-height: 30px;
        color: #231B0B;
        font-weight: bold;
        span{
          display: inline-block;
          color: black;
          font-size: 20px;
          line-height: 40px;
          margin-right: 16px;
        }
      }
    .good-img{
      width: 100%;
        .img{
           width: 100%;
          img{
            width: 100%;
            height: 100%;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;

          }
        }
        .pull{
          margin: 10px 0px;
          p{
            font-size: 13px;
            line-height: 20px;
            color: #181818;
            display: -webkit-box;           
         -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;         
    overflow: hidden;

          }
        }
        .duo{
         
          display: flex;
          justify-content: space-between;
          align-items: center;
          .duo-left{
            display: flex;
            img{
              width: 15px;
              height: 15px;
              border-radius: 50px;
            }
            span{
              display: inline-block;
              font-size: 10px;
              line-height: 15px;
              color: #959595;
            }
          }
          .duo-right{
            display: flex;
            img{
              width: 15px;
              height: 15px;
            }
            span{
              display: inline-block;
              font-size: 10px;
              line-height: 15px;
              color: #959595;
              margin:0 2px ;
            }
          }
          
        }
    }
    }
  }

</style>